<template>
<div>

    <div class="swiper">
        <ul>
            <li v-for="(img_name,index) of img_names" :key="index">
                <img :src="img_name" alt="">
            </li>
        </ul>
    </div>
        <div class="swiper-bottom">
            <a href="">立即成为VIP</a>
        </div>
</div>
</template>

<script>
export default {
    data(){
        return{
            img_names:[
                "/images/1.jpg",
                "/images/1.jpg",
                "/images/1.jpg",
                "/images/1.jpg",
            ]
        }
    }
}
</script>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .swiper{
        width: 9.6rem;
        height: 5.31rem;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 0.3rem;
    }
    .swiper ul{
        width: 400%;
        height: 100%;
    }
    .swiper ul li{
        width: 25%;
        height: 100%;
        float: left;
        list-style: none;
    }
    .swiper img{
        width: 100%;
        height: 100%;
    }
    .swiper-bottom{
        width: 9.6rem;
        height: 1.02rem;
        margin: 0 auto;
        background-color: #f4e2ba;
        margin-top: 0.5rem;
        border-radius: 0.3rem;
    }
    .swiper-bottom a{
        line-height: 1.02rem;
        padding-right: 0.4rem;
        text-decoration: none;
        color: #9e8354;
        font-size: 0.33rem;
        float: right;
    }
</style>